<template>
    <el-drawer
            :visible.sync="dialogVisible"
            size="100%"
            :z-index="2500"
            :modal="false"
            :wrapperClosable="false"
            :withHeader="false"
            :append-to-body="true">
        <el-container class="module xl-container is-vertical">
            <el-header class="xl-bar xl-bar-nav">
                <span class="xl-icon-left-nav el-icon-arrow-left" @click="backClose"></span>
                <h1 class="xl-bar-title">{{params.title}}</h1>
            </el-header>
            <el-main class="xl-main" style="overflow-x: hidden;padding: 5px;" :key="dialogVisible">
                <div class="xl-module xl-form min" v-if="list&&list.length>0">
                    <div class="xl-field-content" v-for="(rec,j) in list" :key="j">
                        <div class="field-items" v-for="(field,index) in heads" :key="index">
                            <div class="field-item slots" v-if="$scopedSlots.field">
                            <span v-for="(item,i) in list" :key="i">
                                 <slot :row="{
                                        item:rec,
                                        fieldIndex:i,
                                        field:field
                                    }" name="field"></slot>
                            </span>
                            </div>
                            <div class="field-item" v-else>
                                <field :item="rec" :field="field" ></field>
                            </div>
                        </div>
                    </div>
                </div>
                <img v-else :src="require('@/assets/nodata.png')" class="xl-nodata">
            </el-main>
        </el-container>
    </el-drawer>
</template>

<script>
import Field from '@/common/template/field'

export default {
  name: 'detail',
  components: { Field },
  data() {
    return {
      list: [],
      heads: []
    }
  },
  computed: {
    params() {
      return this.$store.state.home.params || {};
    },
    dialogVisible: {
      get() {
        return this.$store.getters.getDialog
      },
      set(v) {
        this.$store.dispatch('closeDialog')
      }
    },
    loginInfo() {
      return this.$store.getters.getLoginInfo
    },
  },
  watch: {
    params: {
      handler(nv, o) {
        if (nv.data) {
          this.list = nv.data.records;
          this.heads =  nv.data.fields;
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    backClose() {
      this.$store.dispatch('closeDialog');
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.loginInfo) {
        WaterMarker.addWaterMarker(this.$el.querySelector('.el-drawer'), this.loginInfo);
      }
    });
  },
}
</script>

<style scoped>
    .dialog-title {
        border-bottom: 1px solid #ccc;
        padding-bottom: 5px;
    }
</style>
